<template>
  <canvas ref="canvas" @click="draw" width="140px" height="40px"  style="cursor: pointer;"></canvas>
</template>
<script>
export default {
  data() {
    return {
      codes: [],
      ctx: "",
      colors: ["red", "yellow", "blue", "green", "pink", "black"],
      code_Len: 4
    };
  },
  mounted() {
    this.draw();
  },
  computed: {
    codeString() {
      let result = "";
      for (let i = 0; i < this.codes.length; i++) {
        result += this.codes[i];
      }
      return result.toUpperCase();
    }
  },
  watch: {
    codeString: function(newValue) {
      this.$emit("change", newValue);
    }
  },
  methods: {
    generateRandom() {
      this.codes = [];
      const chars = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789";
      const charsArr = chars.split("");//分割
 
      for (let i = 0; i < this.code_Len; i++) { //for循环依次获取charsArr的值
        const num = Math.floor(Math.random() * charsArr.length);//向下取整floor，确保都是整数下标
        this.codes.push(charsArr[num]);
      }
    },
    draw() {
      this.generateRandom();//获取4个随机数
      this.drawText();
    },
    drawLine() {
      const lineNumber = 3; // 线条条数
      const lineX = 140;
      const lineY = 30; // 最大线条坐标
      for (let i = 0; i < lineNumber; i++) {
        this.ctx.strokeStyle = this.colors[Math.floor(Math.random() * 5)];//设置或返回用于笔触的颜色、渐变或模式 。
        this.ctx.beginPath();
        this.ctx.moveTo(
          Math.floor(Math.random() * lineX),
          Math.floor(Math.random() * lineY)//控制线条的位置
        );
        this.ctx.lineTo(
          Math.floor(Math.random() * lineX),
          Math.floor(Math.random() * lineY)
        );
        this.ctx.stroke();
      }
    },
    drawText() {
      const canvas = this.$refs["canvas"];//$refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（） 就可以使用了
      this.ctx = canvas.getContext("2d");//绘图，getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
 
      this.ctx.fillStyle = "#BFEFFF";//设置或返回用于填充绘画的颜色、渐变或模式
      this.ctx.fillRect(0, 0, 140, 40);//绘制"被填充"的矩形。默认填充色为黑色，使用fillStyle修改填充色,（x,y,width,height）
      this.ctx.font = "20px Verdana";//设置或返回文本内容的当前字体属性
 
      let x = 15;
 
      for (let i = 0; i < this.code_Len; i++) {
        this.ctx.fillStyle = this.colors[Math.floor(Math.random() * 5)];//获取随机颜色,最大为5
        this.ctx.fillText(this.codes[i], x, 25);//在画布上绘制"被填充的"文本,text：绘制文本x，y：位置横纵坐标maxWidth：可选，最大文本宽度
        x = x + 30;//设置每一个codes的位置
      }
 
      this.drawLine();
    }
  }
};
</script>
<style scoped>
canvas{
    text-align: justify;
    margin-top: 10px;
}
</style>